<template>
  <div class="history-container">
    <div class="wraper">
      <div class="page-logo">
        <img class="extend" src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/future.png" alt="" />
      </div>
      <div class="title">
        <div class="line line-first flex-container">
          <div class="btn-dot"></div>
          <div class="des">往期节目回顾</div>
        </div>
        <div class="line line-sub">Review of previous programs</div>
      </div>
      <div class="select-wraper flex-container">
          <div class="years flex-container">
              <div :class="['item', item.year === currentSelectYear ? 'item-select' : '']" v-for="(item, index) in years" :key="index" @click="getYearData(item.year)">
                  {{item.year}}年
              </div>
          </div>
          <div class="select">
              <process-select :lists="years" @callback="selectCallback"></process-select>
          </div>
      </div>
      <div class="content flex-container">
          <history-card 
            :data="item"
            class="history-card" 
            v-for="(item,index) in cardLists" 
            :key="index"
          >
          </history-card>
      </div>
    </div>
  </div>
</template>

<script>
import processSelect from '@/components/processSelect.vue'
import historyCard from './components/card.vue'
import getHistory from '@/service/history/index'
export default {
    name:'history',
    data(){
        return{
            years:[
            ],
            currentSelectYear:-1,
            cardLists:[
                {     
                    "title":'TEST',
                    "show_url": "images/经典回顾.png", //封面图片
                    "mp4_url": "files/abs.mp4", //mp4链接
                    "content_desc": "介绍：介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。介绍内容介绍内容介绍内容介绍内容介绍内容。", //内容介绍
                    "flag": "2017" //标记
                }
            ]
        }
    },
    mounted(){
      this.init()
    },
    methods:{
      selectCallback(obj){
        if(Object.keys(obj).length > 0){
          this.getYearData(this.years[obj.index].year)
        }
      },
      init(){
        this.getYearData()
      },
      async getYearData(val){
        let res
        if(!val){
          res = await getHistory()
        }
        else res = await getHistory({flag:`${val}`})
        if(res.data.result.flag_list){
          this.years = res.data.result.flag_list
          this.years = res.data.result.flag_list.map(item=>{
            return {year:item}
          })
          if(this.years.length !== 0 && !val){
            this.currentSelectYear = this.years[0].year
            this.cardLists = res.data.result.wqjm_list[this.years[0].year]
            return
          }
          this.currentSelectYear = val
          this.cardLists = res.data.result.wqjm_list[val]
        }
      }
    },
    components:{
        processSelect,
        historyCard
    }
};
</script>

<style lang="less" scoped>
.history-container {
  flex: 1 0 auto;
  background: url("http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/bg-history.png");
  background-size: cover;
  background-repeat: no-repeat;
//   background-repeat: no-repeat;
}
.wraper {
  width: 1200px;
  margin: 0 auto;
  .page-logo {
    width: 961px;
    height: 51px;
    margin: 0px auto;
    padding: 38px 0;
  }
  .title {
    // min-width: 200px;
    text-align: center;
    margin: 0 auto;
    .line {
      justify-content: center;
      min-width: 200px;
    }
    .btn-dot {
      width: 25px;
      height: 25px;
      margin-right: 10px;
      background: #b8262c;
    }
    .des {
      font-size: 30px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #333333;
    }
    .line-sub {
      font-size: 20px;
      // text-align: left;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #6b6b6b;
    }
  }
  .content {
    flex-wrap: wrap;
    min-height: 872px;
    align-items: flex-start;
    .wraper {
      padding: 39px 0;
      align-items: flex-end;
      .vedio {
        width: 669px;
        height: 396px;
        background: #b8262c;
      }
      .des {
        width: 482px;
        margin-left: 32px;
      }
    }
    .content{
        width:1200px
    }
  }
  .select-wraper{
        font-size: 20px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #414141;
        line-height: 28px;
        padding: 30px 0;
        justify-content: space-around;
        .years{
            height: 40px;
            .item{
                margin-right: 100px;
            }
            .item-select{
              color:#B8262C;
              border-bottom: 2px solid #B8262C;
            }
            .item:hover{
                cursor: pointer;
                color:#B8262C;
                border-bottom: 2px solid #B8262C;
            }
        }
  }
}
.flex-container {
  display: flex;
  align-items: center;
}
.extend {
  width: 100%;
  height: 100%;
  display: block;
}
.history-card{
    margin-right: 20px;
}
</style>